<template>
  <div>
    <el-row class="lock-btn">
       <el-button :disabled="userState" size="medium" type="primary" @click="addBtn" round>添加</el-button>


       <el-select v-model="form2.partnerId" filterable clearable placeholder="请选择合伙人">
          <el-option key="''" label="全部" :value="''"></el-option>
          <el-option v-for="partner in copartners" v-bind:key="partner.id" :label="partner.name" :value="partner.id"></el-option>
        </el-select>
        
        <el-select v-model="form2.parkfieldId" filterable clearable placeholder="请选择停车场">
          <el-option key="''" label="全部" :value="''"></el-option>
          <el-option v-for="parkfield in parkfieldList" v-bind:key="parkfield.id" :label="parkfield.name" :value="parkfield.id"></el-option>
        </el-select>
        
       

        <el-button :disabled="userState" size="medium" type="primary" @click="queryBtn" round>搜索</el-button>
   </el-row>
   
    <el-table style="box-shadow: rgb(205 205 205) 1px 1px 8px;" :header-cell-style="{ background: '#ecf3fd',color:'#000000' }" highlight-current-row  ref="lcpartnerlockTable"   v-loading="loading" :data="partnerParkfields" :stripe="true" :row-key="'id'" :max-height="clientHeight" :height="clientHeight"  @selection-change="handleTableChange">
 
      <el-table-column prop="parterName" label="合伙人姓名" width="" align="center">
        <template slot-scope="scope">
          <span>{{getPartnerName(scope.row.partnerId)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="类型" label="类型" width="" align="center">
        <template slot-scope="scope">
          <span>{{getPartnerType(scope.row.partnerId)}}</span>
        </template>
        </el-table-column> 
      <el-table-column prop="parkfieldId" label="停车场名称" width="" align="center">
        <template slot-scope="scope">
          <span>{{getParkfieldName(scope.row.parkfieldId)}}</span>
        </template>
        </el-table-column>
      <el-table-column prop="proportion" label="分成比例" width="" align="center"></el-table-column>
      <el-table-column label="操作" fixed="right" width="140" align="center">
        <template slot-scope="scope">
          <el-button :disabled="userState" class="operateBtn" size="mini" type="primary" @click="editBtn(scope.$index, scope.row)" title="修改">
            <i class="el-icon-edit-outline"></i>
          </el-button>
          <el-button v-if="roleIndex == false" :disabled="userState" class="operateBtn" size="mini" type="danger" @click="delPartnerParkfield(scope.$index, scope.row)" title="删除">
            <i class="el-icon-delete"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
 
    <el-row>
      <el-col :span="24" class="page-tool">
        <el-pagination layout="total,sizes,prev, pager,next,jumper" :page-size="pageSize" :total="total" :page-sizes="[10, 20, 30, 40, 100]" @size-change="handlePageChange" @current-change="handleNoChange"></el-pagination>
      </el-col>
    </el-row>

    <el-dialog :title="dialogTitle" :visible.sync="addDialog" :width="'422px'">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="合伙人" :label-width="labelWidth" prop="partnerId">
          <el-select filterable v-model="form.partnerId" placeholder="请选择合伙人">
          <!-- :disabled="dialogTitle !== '添加收益人'"> -->
            <el-option v-for="partner in copartners" v-bind:key="partner.id" :label="partner.name" :value="partner.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="停车场"  :label-width="labelWidth" prop="parkfieldId">
          <el-select filterable v-model="form.parkfieldId" placeholder="请选择停车场">
          <!-- :disabled="dialogTitle !== '添加收益人'"> -->
            <el-option v-for="parkfield in parkfieldList" v-bind:key="parkfield.id" :label="parkfield.name" :value="parkfield.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分成比例" :label-width="labelWidth" prop="proportion">
          <!-- <el-input v-model="form.proportion" type="number" step="0.01" min="0.01" max="1"></el-input> -->
          <el-input v-model="form.proportion"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="savePartnerParkfield">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { loadPartnerApi } from '../../api/partner.js'
import {
  loadParkfieldsApi,
  addPartnerParkfieldApi,
  updatePartnerParkfieldApi,
  queryPartnerParkfieldApi,
  delApi
} from '../../api/partnerParkfield.js'
import { getNickName, getTestUserName, getManagerId,getRoleId } from "../../util/auth";
export default {
  data () {
    return {
      clientHeight:
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) -
        132 -
        5 +
        10 -
        28,
      labelWidth: '120px',
      loading: false,
      dialogTitle: '',
      pageNo: 1,
      pageSize: 20,
      total: 0,
      partnerParkfields: [],
      addDialog: false,
      form: {
     
      },
      form2:{},
      copartners: [],
      roleIndex: true,
      parkfieldList: [],
      currentParkfieldId: '',
      managerId: '',

      rules: {
        partnerId: [
            { required: true, message: '请选择合伙人', trigger: 'change' }
          ],
        parkfieldId: [
            { required: true, message: '请选择停车场', trigger: 'change' }
          ],
        proportion: [
            { required: true, message: '请输入分成比例', trigger: 'blur' }
          ],
      },

    }
  },
  methods: {
 
     handlePageChange (pageSize) {
      this.pageSize = pageSize;
      this.loadPartnerParkfields(this.pageNo, this.pageSize);
    },

    handleNoChange (pageNo) {
      this.pageNo = pageNo;
      this.loadPartnerParkfields(this.pageNo, this.pageSize);
    },

    handleTableChange (val) {
      this.multipleSelection = val;
    },

    loadPartnerParkfields (pageNo,pageSize) {
      let _this = this
      _this.loading = true
      _this.form.managerId = _this.managerId
      _this.form.pageNo =  pageNo
      _this.form.pageSize =  pageSize

      if(_this.form.parkfieldId == ""){_this.form.parkfieldId = null}

      if(_this.form.partnerId == ""){_this.form.partnerId = null}
 
      queryPartnerParkfieldApi(_this.form)
        .then(resp => {
          _this.total = resp.data.totalNum
          _this.partnerParkfields = resp.data.dataList
          _this.loading = false
        })
        .catch(e => {
          this.loaded = false
          this.loading = false
          console.log(e)
        })
    },
    savePartnerParkfield () {
      let _this = this
      _this.$refs.form.validate((valid) => {
        if (valid) {
          if (_this.dialogTitle === '添加收益人') {
            addPartnerParkfieldApi(_this.form).then(resp => {
              _this.addDialog = false
              if (resp.errmsg === 'ok') {

                _this.queryBtn()
                _this.$notify({
                  title: '成功',
                  message: '收益人添加成功',
                  type: 'success'
                })

              } else {

                _this.$notify({
                  title: '失败',
                  message: '收益人添加失败',
                  type: 'error'
                })

              }
            })
          } else {

            updatePartnerParkfieldApi(_this.form).then(resp => {
              _this.addDialog = false
              if (resp.errmsg === 'ok') {
                _this.queryBtn()
                _this.$notify({
                  title: '成功',
                  message: '收益人修改成功',
                  type: 'success'
                })
              } else {
                _this.$notify({
                  title: '失败',
                  message: '收益人修改失败',
                  type: 'error'
                })
              }
            })
          }
        }
      });
    },
    addBtn () {
      let _this = this
      _this.$nextTick(()=>{
        if(_this.$refs.form != undefined){
          _this.$refs.form.resetFields();
        }
      })
      _this.dialogTitle = '添加收益人'
      _this.form = {}
      _this.form.proportion = 1
      _this.loadPartners()
      _this.loadParkfields()
      _this.addDialog = true
    },
    editBtn (index, row) {
      let _this = this
      _this.$nextTick(()=>{
        if(_this.$refs.form != undefined){
          _this.$refs.form.resetFields();
        }
      })
      _this.dialogTitle = '修改收益人'
      _this.form = row
      _this.addDialog = true
    },

    queryBtn () {
      let _this = this
      _this.loading = true
      console.log("_this.form: {}",_this.form);

      if(_this.form.parkfieldId == ""){_this.form.parkfieldId = null}

      if(_this.form.partnerId == ""){_this.form.partnerId = null}



const form2 = {
  managerId:_this.managerId,
  pageNo:_this.pageNo,
  pageSize:_this.pageSize,
  parkfieldId: _this.form2.parkfieldId,
  partnerId: _this.form2.partnerId,
}



      // _this.loadPartnerParkfields (_this.pageNo, _this.pageSize);

      queryPartnerParkfieldApi(form2)
        .then(resp => {
          _this.total = resp.data.totalNum
          _this.partnerParkfields = resp.data.dataList
          _this.loading = false
        })
        .catch(e => {
          this.loaded = false
          this.loading = false
          console.log(e)
        })
 
    },

    loadPartners (pageNo, pageSize) {
      let _this = this
      _this.loading = true
      loadPartnerApi(pageNo,pageSize)
        .then(resp => {
          _this.copartners = resp.data.dataList
          _this.loading = false
        })
        .catch(e => {
          this.loaded = false
          this.loading = false
          console.log(e)
        })
    },

    getPartnerName (id) {
      var array = this.copartners.filter(partner => {
        return partner.id === id
      })
      return array.length ? array[0].name : ''
    },

     getPartnerOpenid (id) {
      var array = this.copartners.filter(partner => {
        return partner.id === id
      })
      return array.length ? array[0].openId : ''
    },

    
     getPartnerType (id) {
      var array = this.copartners.filter(partner => {
        return partner.id === id
      })
      var typeList = ["个人","企业"];
      if(array.length>0){
 
        return array.length ? typeList[array[0].type] : ''
      }else{
        return
      }
    },

    getParkfieldName (id) {
      var array = this.parkfieldList.filter(parkfield => {
        return parkfield.id === id
      })
      return array.length ? array[0].name : ''
    },

    loadParkfields () {
      let _this = this
      _this.loading = true
     
        loadParkfieldsApi().then(function (resp) {
          _this.loading = false
          if (resp.errmsg === 'ok') {
            _this.parkfieldList = resp.data.dataList
          }
        })
        .catch(function (e) {
          console.log(e)
        })
    },

    getparkfiledAddress (id) {
      var array = this.parkfieldList.filter(parkfield => {
        return parkfield.parkfieldId === id
      })
      return array.length ? array[0].name : ''
    },

    delPartnerParkfield (index, row) {
      let _this = this
      this.$confirm('确认删除该收益组合：“' +_this.getParkfieldName(row.parkfieldId) + '-' + _this.getPartnerName(row.partnerId) + '”', '提示', {
        type: 'warning'
      })
        .then(_ => {
          delApi(row).then(function (resp) {
            if (resp.errmsg === 'ok') {
              _this.queryBtn()
              _this.$notify({
                title: '成功',
                message: '收益人删除成功',
                type: 'success'
              })
            }
          })
        })
    },

    batchDelete () {
      let _this = this
      _this.$notify({
        title: '提示',
        message: '批量删除收益人尚未上线',
        type: 'info',
        duration: 1000
      })
     
    }
  },
  computed: {
    userState () {
      return getNickName() === getTestUserName();
    }
  },
  mounted: function () {
    let _this = this
    this.roleIndex = getRoleId()==1?false:true;
    _this.managerId = getManagerId()
    if(_this.managerId!=''||_this.managerId!=undefined||this.managerId!=null){
      _this.loadPartners()
      _this.loadParkfields()
      _this.$nextTick(function () {
        _this.loadPartnerParkfields(_this.pageNo, _this.pageSize);
     
      })
    }
  }
}
</script>
<style>

.page-tool div {
  text-align: right;
}

.lock-btn {
  margin-bottom: 5px;
  margin-top: -10px;
}

.operateBtn {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
}

</style>
